<template>
  <div>
    <!-- 导航条 -->
    <div>
      <nav-bar class="nav-details">
        <div class="nav-left" slot="left" @click="goHome">
          <!-- <img src="../../assets/img/detail/return.png" /> -->
          <i class="el-icon-back"></i>
          返回
        </div>
        <div slot="center">详情页</div>
      </nav-bar>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <!-- 图片 -->
          <div class="pic">
            <img :src="goodurl" />
          </div>
          <!-- 文字 -->
          <div class="fonts">
            <!-- 标题 -->
            <div class="titles">
              <h3>商品名称：{{goodname}}</h3>
            </div>
            <!-- 价格 -->
            <div class="price">
              <h2>￥{{goodprice}}/{{valuation}}</h2>
            </div>
            <!-- 租借时长 -->
            <div class="num">
              <div>
                <button @click="sub(good_id)" :disabled="dis">-</button>
                <span>
                  租借时长：{{
                  this.num
                  }}{{valuation}}
                </span>
                <button @click="add(good_id)">+</button>
              </div>
              <!-- 意向清单 -->
              <button
                class="stopcart"
                :class="{ activeBgColor: isActive == true }"
                @click="addToCart"
              >加入意向清单</button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <h2>商品详情：</h2>
          <h3>商品ID：{{good_id}}</h3>
          <h3>商品名称：{{goodname}}</h3>
          <h3>商品描述：{{gooddescription}}</h3>
          <h3>商品类型：{{type}}</h3>
          <h3>商品单价：{{goodprice}}</h3>
          <h3>商品持有者账号：{{lenderId}}</h3>
        </div>
      </el-col>
    </el-row>
      
  </div>
</template>

<script>
import Vue from "vue";
import NavBar from "../../components/common/navbar/NavBar.vue";

export default {
  name: "Details",
  //进入日用品页面后向后端请求商品信息
  created(){
    var self = this
    this.$axios
    .get(
      '/itemBorrowState?borrow_state=allow_borrow&type=日用品'
    )
    .then(function(response){
      // handle success
      console.log(response)
      self.goodsList = response.data
      console.log(self.goodsList)
    })
    .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
      // always executed
    })
  },
  data() {
    return {
      num:0,
      isActive: false,
      good_id: this.$route.params.goodId,
      goodurl: this.$route.params.goodurl,
      goodname: this.$route.params.goodname,
      gooddescription: this.$route.params.gooddescription,
      goodprice: this.$route.params.goodprice,
      lenderId: this.$route.params.lenderId,
      valuation: this.$route.params.valuation,
      type: this.$route.params.type,
      goodsList: {},
      dis: true
    };
  },
  components: {
    NavBar
  },
  methods: {
    add() {
      this.num += 1;
      if (this.num >= 0) {
        this.dis = false;
      }
    },
    sub(good_id) {
      this.num -= 1;
      if (this.num == 0) {
        this.dis = true;
      } else {
        this.dis = false;
      }
    },
    goHome() {
      this.$router.push("/dailyNecessarites");
    },
    addToCart() {
      if (this.num >= 1) {
        this.isActive = true;
        //传入商品id
        const goodsListCount = this.num;
        const goodsListID = this.good_id;
        const goodsListName = this.goodname;
        const goodsListPrice = this.goodprice;
        const lenderId = this.lenderId;
        const cart = this.$store.state.cart;
        let temp = {
          "goodsListID": goodsListID,
          "goodsListCount": goodsListCount,
          "goodsListName": goodsListName,
          "goodsListPrice": goodsListPrice,
          "lenderId": lenderId
        }
        const result = cart.find(ele => ele.id == goodsListID);
        if (result == undefined) {
          cart.push(temp);
          console.log(this.$store.state.cart);
        } else {
          document.querySelector(".stopcart").innerHTML = "请勿重复添加";
        }
      }
    }
  }
};
</script>

<style scoped>
.nav-details {
  background-color: rgb(248, 94, 73);
  color: #fff;
}
.nav-details div img {
  width: 25px;
  position: relative;
  top: 6px;
}
.nav-left {
  margin-left: 10px;
}
.pic {
  text-align: center;
  margin-top: 20px;
}
.pic img {
  width: 300px;
  height: 300px;
}
.fonts {
  text-align: center;
  margin-top: 20px;
}

.price {
  color: #f00;
}
.num {
  margin-top: 6px;
  position: relative;
  /* margin-bottom: 100px; */
}
.num span {
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;
  margin-right: 10px;
}
button {
  width: 30px;
}
.stopcart {
  width: 150px;
  height: 30px;
  margin-top: 10px;
  color: #fff;
  background-color: rgb(248, 94, 73);
}
.activeBgColor {
  background-color: rgb(90, 138, 76);
}


  .el-row {
    margin-bottom: 20px;
    /* &:last-child {
      margin-bottom: 0;
    } */
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #f0dada;
  }
  .bg-purple {
    background: #f0dada;
  }
  .bg-purple-light {
    background: #f0dada;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color:#f0dada;
  }
</style>

